<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="接诊日期">
          <el-date-picker v-model="form.startTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
          <el-date-picker style="marigin-left:4%;" v-model="form.endTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <el-row :gutter="20">
        <el-col :span="16">
          <table class="table-box">
            <thead>
              <tr>
                <th style="text-align:center;font-size:18px;" colspan="6">接诊类型统计报表</th>
              </tr>
              <tr>
                <th>接诊日期</th>
                <th>初诊</th>
                <th>复诊</th>
                <!-- <th>成人体检</th>
            <th>儿童体检</th>
            <th>方便门诊</th> -->
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tabList" :key="index">
                <td>{{item.date}}</td>
                <td>{{item.firstVisit}}</td>
                <td>{{item.subsequentVisit}}</td>
                <!-- <td></td>
            <td></td>
            <td></td> -->
              </tr>
              <tr>
                <td>合计</td>
                <td>{{orderDayCount.firstVisitTotal}}</td>
                <td>{{orderDayCount.subsequentVisitTotal}}</td>
                <!-- <td></td>
            <td></td>
            <td></td> -->
              </tr>
            </tbody>
          </table>
          <br />
          <!-- <pager v-model="pager" @change-pagenum="getChartTable"></pager> -->
        </el-col>
        <el-col :span="8">
          <div ref="labelchart" class="chart_box"></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        startTime: "",
        endTime: ""
      },
      orderDayCount: {
        subsequentVisitTotal: 0,
        firstVisitTotal: 0
      },
      showDay: false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: [],
      chart: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x: "center",
          top: 40,
          data: ["UCC国际洗涤厂", "兰心洗涤厂", "洪雅洗涤厂"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "UCC国际洗涤厂" },
              { value: 310, name: "兰心洗涤厂" },
              { value: 234, name: "洪雅洗涤厂" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.form.startTime = this.getDate();
    this.form.endTime = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      th.chart = echarts.init(th.$refs["labelchart"]);
      let j = Object.assign(th.form, th.pager);
      th.$api
        .receptionType(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.data.receptionTypeReportInfoVOS;
            let chart_title = [
              "初诊",
              "复诊",
              "成人体检",
              "儿童体检",
              "方便门诊"
            ];
            let chart_data = [
              {
                name: "初诊",
                value: res.data.firstVisitTotal
              },
              {
                name: "复诊",
                value: res.data.subsequentVisitTotal
              }
            ];
            th.option.legend.data = chart_title;
            th.option.series[0].data = chart_data;
            th.orderDayCount.firstVisitTotal = res.data.firstVisitTotal;
            th.orderDayCount.subsequentVisitTotal =
              res.data.subsequentVisitTotal;
            th.chart.setOption(th.option);

            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  display: inline-block;
  width: 100%;
  height: 400px;
}
</style>